<template>
  <div>
    <div class="ddgl">
      <ul>
        <li v-for="(item,i) in $parent.tabslist" :key="i">
          <div class="ddxx">
            <div>
              <a-icon type="shop" />
              <span>
                <span class="fot_tit">{{item.dhdwmc}}</span>
              </span>
              <span>
                <span class="fot_tit">订单编号：</span>
                {{item.SQDHDH}}
              </span>
              
              <span>
                <span class="fot_tit">
                  <a-icon type="phone" />TEL：&nbsp;
                </span>
                {{item.dhrPHONE}}
              </span>
            </div>
          
          </div>
          <div class="ddxxlist ddxxhead">
            <span class="listspan">订单号</span>
            <span class="listspan">品牌</span>
            <span class="listspan">地址</span>
            <span class="listspan">价格</span>
            <span class="listspan">数量</span>
            <span class="listspan">合计</span>
              <span class="rightspan " style="color:red;">{{item.SHBJB}}</span>
          </div>
          <div class="ddxxlist dxbody" v-for="(item,i) in item.detail" :key="i">
            <span class="listspan">{{item.XL}}</span>
            <span class="listspan">{{item.SCCJC}}</span>
            <span class="listspan">{{item.SZQY}}</span>
            <span class="listspan">
              <span>
                <span class="orange">￥{{item.HSJ}}</span>
                /{{item.JLDW}}
              </span>
            </span>
            <span class="listspan">x{{item.DHSL}}</span>
            <span class="listspan">小计：<span class="orange red">￥{{item.HSJ*item.DHSL}}</span></span>
              <span class="rightspan"></span>

          </div>
          <div class="ddxxfot">
            <span>
              <span class="fot_tit">提交日期:</span>
              {{item.ZDRQ}}
            </span>
            <!-- <br /> -->
            <span>
              <span class="fot_tit">收货地址:</span>
              {{item.FHDZ}}
            </span>
            <!-- <br /> -->
            <span>
              <span class="fot_tit">收货人:</span>
              {{item.fhlxr}}
            </span>
          </div>
          <div class="ddxxlist">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span>
              共计
              <span class="orange red">{{item.DHSL}}</span> 商品
            </span>
            <span>
              合计
              <span class="orange red">￥{{item.zje}}</span>
            </span>
            <span
              v-if="item.SHBJB=='交易关闭'||item.SHBJB=='交易完成'||item.SHBJB=='已发货'||item.SHBJB=='关闭订单'?false:true"
            >
              <span class="size">订单处理：</span>
              <!-- SQDHDH -->
              <a-button
                class="colosedd"
                @click="ddztsub(ddgb,item.SQDHDH)"
                v-if="item.SHBJB=='待支付'"
              >关闭订单</a-button>
              <a-button
                class="button"
                type="primary"
                @click="ddztsub(yfk,item.SQDHDH)"
                v-if="item.SHBJB=='待支付'"
              >已付款</a-button>
              <a-button
                class="button"
                type="primary"
                @click="ddztsub(yfh,item.SQDHDH)"
                v-if="item.SHBJB=='已付款'||item.SHBJB=='待发货'"
              >已发货</a-button>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import { setTimeout } from "timers";
// import { setTimeout } from 'timers';
export default {
  inject: ["reload"],

  data() {
    return {
      sele: "",
      serchvalue: "",
      tabslist: [],
      ddgb: "关闭订单",
      yfk: "已付款",
      yfh: "已发货"
    };
  },

  methods: {
    ddztsub(value, sqdwid) {
      this.axios
        .post(
          "order/setOrderState.php",
          qs.stringify({
            SQDHDH: sqdwid,
            shbjb: value
          })
        )
        .then(res => {
          console.log(res);
          this.$parent.getddgl();
        });
    }
  },

  created() {
    console.log(this.$parent.tabskey);
  }
};
</script>

<style lang='less'>
.ddgl {
  width: 98%;
  position: relative;
  top: 10px;
  left: 1%;
  background-color: #f3f7f9 !important;
  height: auto;
  padding: 20px;

  ul {
    margin: 0 auto;
    height: auto;
    li {
      margin: 10px 0;
      border-bottom: 1px solid #ccc;
      background: #fff;
      .colosedd {
        color: #fff;
        background-color: #999 !important;
        border: 0 !important;
      }

      .size {
        font-size: 14px;
        font-weight: bold;
        color: #666;
      }
      .ddxx {
        display: flex;
        justify-content: space-between;
        padding: 10px;
           background-color: #c5c790;
           color: #fff;
        // border-bottom: 1px solid #ccc;

        span {
          margin-right: 20px;
          color: #fff;
        }
      }
      .ddxxhead {
     
        border-bottom: 1px solid #ccc;
        .listspan {
  
         // color: #bababa;
        }
      }
      .dxbody{
      //  border-bottom:1px solid #e9e6e6;
      }
      .ddxxlist {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        .listspan {
          // display: flex;
          // justify-content: space-between;
          width: 20%;
        }
        .rightspan{
          width: 10%;
          text-align: right;
        }
        span {
          button {
            margin: 0 10px;
          }
          .button {
            background-color: #1890ff;
            border: 0 !important;
          }
        }
        .orange {
          color: red;
       
        }
        .red{
  font-size: 14px;
        
        }
      }
      .ddxxfot {
        text-align: left;
       background-color: #f1f1f1;
        padding: 5px 10px;
        position: relative;
        font-size: 14px;
        color: #999;
        top: 42px;
        border-top: 1px solid #ccc;
        span {
          line-height: 25px;
        }
      }
    }
    .fot_tit {
      margin-right: 0px !important;
      color: #000;
    }
  }
  // ul:last-child {
  //   border-bottom: 1px solid #ccc;
  // }
}
</style>
